<template>
	<div class="homePage">

		<div class="about_most">
			<div class="about_top">
				<div class="about_top_left">
					<i-icon type="coordinates" size="20" color="#b0b3b6" />
					<span>北京市</span>
				</div>
				<div class="about_top_right">
					<button>更改地址</button>
				</div>
			</div>
			<div class="about_bottom">
				<div class="about_bottom_left">
					<input type="text" placeholder="请输入教练姓名或手机号">
				</div>
				<div class="about_bottom_right" style="position: relative;">
					<button>搜索教练</button>
				</div>
			</div>
		</div>
		
		
		 <div class="about_info">
      <!--教练一-->
      <div class="about_coach">
        <div class="about_coach_kile">
          <dl>
            <dt>
              <img src="">
            </dt>
            <dd>
              <!--姓名-->
              <div class="coach_name">
                <p>莫林</p>
              </div>
              <!--姓名结束-->
              <!--累计课时与粉丝数-->
              <div class="coach_hour">
                <div class="coach_left">
                  <div class="coach_xing" style="margin-top: -2px;">
                    <!--<el-rate v-model="item.star" disabled></el-rate>-->
                     <i-rate disabled="false" value="3" size="14" style="height: 14px;display: flex;align-items: center;"></i-rate>
                  </div>
                  <div class="coach_total">
                    累计课时:
                    <span>95小时</span>
                  </div>
                </div>
                <div class="coach_right">938m</div>
              </div>
              <!--累计课时与粉丝数结束-->
              <!--好评-->
              <div class="coach_dome">
                <div class="coach_jin">
                  <p>好评</p>
                  <span>5</span>
                </div>
                <div class="coach_made">
                  <p>粉丝数</p>
                  <span>216</span>
                  <i-icon type="praise_fill" size="12" style="color: #4d579e;"/>
                </div>
              </div>

              <!--今日可预约-->
              <div class="coach_data">
                <span style="color: #4d579e;">今日可预约</span>
                <p>两周内可预约1天</p>
                <span></span>
              </div>
              <!--今日可预约结束-->
              <!--距离多少米-->
              <div class="coach_range">
                <div  class="coach_min">理疗康复</div>
                <div  class="coach_min">理疗康复</div>
                <div  class="coach_min">理疗康复</div>
                
              </div>
              <!--距离多少米结束-->
            </dd>
          </dl>
        </div>
      </div>
      </div>

		
		
		

	</div>
</template>

<script>
	export default  {
		data() {
			return {
            lng:'116.4',
            lat:'39.9',
            most:[]
			}
		},
		created() {
			this.getUserInfo()
        

		},
		mounted(){
//			 var url = '/yujia/user/findCoachByDistant'
//			var methods = 'POST'
//			var date = {
//				 code: 1,
//               lng: 116.4,
//               lat:39.9,
//			}
//			var _this = this
//			network.requestLoading(url, date, methods, '正在加载数据', function(res) {
//				_this.most = res.data.data
//				console.log(res.data.data)
//			}, function() {
//				wx.showToast({
//					title: '加载数据失败',
//				})
//			})
		},
		methods: {
           getUserInfo() {
				// 调用登录接口
				wx.login({
					success: () => {
						wx.getUserInfo({
							success: (res) => {
								this.userInfo = res.userInfo
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.about_most {
		width: 95%;
		margin: 0 auto;
	}
	
	.about_most .about_top {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
	}
	
	.about_most .about_top .about_top_left {
		width: 75%;
		float: left;
		display: flex;
		align-items: center;
	}
	.about_most .about_top .about_top_left i-icon{
		float: left;
	}
	.about_most .about_top .about_top_left span {
		font-size: 15px;
		color: #000000;
		font-weight: normal;
		float: left;
		padding-left: 4px;
		margin-top: 3px;
		width: 85%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.about_most .about_top .about_top_right {
		float: right;
	}
	
	.about_most .about_top .about_top_right button {
		/*width: 80px;*/
		height: 30px;
		line-height: 30px;
		border: none;
		background: #fed403;
		color: #000000;
		border-radius: 15px;
		font-size: 14px;
		outline: none;
	}
	
	.about_most .about_bottom {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eeeeee;
	}
	
	.about_most .about_bottom .about_bottom_left {
		width: 70%;
		height: 39px;
		line-height: 39px;
		display: flex;
		align-items: center;
	}
	
	.about_most .about_bottom .about_bottom_left input {
		width: 100%;
		border: none;
		outline: none;
		padding: 0;
		padding-left: 10px;
		color: #000000;
		font-weight: lighter;
		text-align: left;
		font-size: 14px;
	}
	
	.about_most .about_bottom .about_bottom_left input::placeholder {
		color: #aaaaaa;
		font-size: 14px;
	}
	
	.about_most .about_bottom .about_bottom_right button {
		/*width: 80px;*/
		height: 30px;
		line-height: 30px;
		border: none;
		background: #fed403;
		color: #000000;
		border-radius: 15px;
		font-size: 14px;
		outline: none;
	}
	
	
	.about_info {
	width: 100%;
	background: #eeeeee;
	position: absolute;
	left: 0;
	top:122px;
	float: left;
	/*margin-bottom: 3.125rem;*/
}


/*教练一*/

.about_info .about_coach {
	width: 95%;
	background: #fff;
	margin: 10px auto;
	border-radius:10px;
}

.about_info .about_coach .about_coach_kile {
	width: 92%;
	margin: 10px auto;
}

.about_info .about_coach .about_coach_kile dl {
	width: 100%;
	display: flex;
	padding: 10px 0;
	/* align-items: center; */
	
}

.about_info .about_coach .about_coach_kile dl dt {
	width: 70px;
	height: 70px;
}

.about_info .about_coach .about_coach_kile dl dt img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 2px solid #ccc;
}

.about_info .about_coach .about_coach_kile dl dd {
	width: 74%;
	padding-left: 15px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_name {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.about_info .about_coach .about_coach_kile dl dd .coach_name p {
	font-size:16px;
	color: #000000;
	letter-spacing: 2px;
}


.about_info .about_coach .about_coach_kile dl dd .coach_hour {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.about_info .about_coach .about_coach_kile dl dd .coach_hour .coach_left{
	display: flex;
	align-items:center;
}
.about_info .about_coach .about_coach_kile dl dd .coach_hour .coach_left .coach_xing{
	display: flex;
	align-items: center;
}
.about_info .about_coach .about_coach_kile dl dd .coach_hour .coach_left .coach_total {
padding-left:5px;
font-size: 10px;
color: #606060;
}

.about_info .about_coach .about_coach_kile dl dd .coach_hour .coach_left .coach_total span {
	font-size:10px;
	display: inline-block;

}
.about_info .about_coach .about_coach_kile dl dd .coach_hour .coach_right{
	font-size:11px;
	color: #444444;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome{
	width: 100%;
	display: flex;
	align-items: center;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_jin{
	height: 12px;
	display: flex;
	align-items: center;
	border-right: 1px solid #8a8a8a;
	padding-right: 8px;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_jin p{
	font-size:10px;
	color: #606060;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_jin span{
	display: inline-block;
	font-size:10px;
	padding-left:8px;
	color: #606060;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome font{
	width: 1px;
	height:12px;
	background: #8a8a8a;
	margin-top: 1px;
	margin: 0 8pc;
	margin-top: -1px;
}
.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_made {
	display: flex;
	align-items: center;
	padding-left: 8px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_made p {
	font-size: 10px;
	color: #606060;
}

.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_made span {
	font-size:10px;
	margin-left: 8px;
	color: #606060;
}

.about_info .about_coach .about_coach_kile dl dd .coach_dome .coach_made i-icon {
	margin-top:-2.5px;
	margin-left: 4px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_data {
	width: 100%;
	display: flex;
	align-items: center;
}

.about_info .about_coach .about_coach_kile dl dd .coach_data span:first-child {
	font-size:10px;
	color: #606060;
}
.about_info .about_coach .about_coach_kile dl dd .coach_data span:nth-child(2) {
	font-size: 10px;
	color: #606060;
}

.about_info .about_coach .about_coach_kile dl dd .coach_data p {
	font-size: 10px;
	margin-left: 14px;
	color: #606060;
}


.about_info .about_coach .about_coach_kile dl dd .coach_data span:last-child {
	width:6px;
	height:6px;
	border-radius: 50%;
	background: #4d579e;
	margin-left: 5;
	margin-top: -1px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_range {
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_range .coach_min {
	border: 1px solid #4d579e;
	color: #4d579e;
	letter-spacing:1px;
	border-radius: 5px;
	padding:0 5px;
	font-size: 10px;
	height: 18px;
	line-height:18px;
	margin-left: 3px;
	text-align: center;
	float: left;
}
.about_info .about_coach .about_coach_kile dl dd .coach_range .coach_min:nth-child(2){
	margin-left:5px;
}

.about_info .about_coach .about_coach_kile dl dd .coach_range .coach_min:nth-child(3){
	margin-left:5px;
}

/*教练二*/
</style>